<script setup>
// #region 引入包, 函数和组件
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const route = useRoute();
const router = useRouter();
const props = defineProps({
  filmId: {
    type: String,
    default: '',
  },
  showCinemas: {
    type: Array,
    default: [],
  },
  curIndex: {
    type: Number,
    default: 0,
  },
  curCinemas: {},
});
// #endregion

// #region // 变量

// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <div class="cinemas">
    <div
      class="cinema"
      v-for="cinema in curCinemas?.children"
      :key="cinema?.cinemaId + Math.random()"
      @click="
        router.push({
          name: 'cinemadetail',
          params: {
            cinemaId: cinema?.cinemaId,
            filmId: filmId,
            time: showCinemas[curIndex]?.showDate || '',
          },
        })
      "
    >
      <p class="cinema_name">{{ cinema?.name }}</p>
      <p class="cinema_price">
        ￥<span>{{ cinema?.lowPrice / 100 }}</span
        >起
      </p>
      <p class="cinema_address">{{ cinema?.address }}</p>
      <p class="cinema_distance">{{ (cinema?.Distance / 10000).toFixed(1) }}公里</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@mixin nowrap($size, $color) {
  font-size: $size;
  color: $color;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.cinemas {
  padding: 0 0.15rem;
  z-index: 8;
}

.cinema {
  padding: 0.15rem 0;
  display: grid;
  grid-template-columns: 2.75rem 0.7rem;
  grid-template-rows: 0.225rem 0.195rem;
  grid-row-gap: 0.05rem;
}

.cinema_name,
.cinema_address {
  @include nowrap(0.15rem, var(--cl-blk));
}

.cinema_address {
  color: var(--cl-wh);
  font-size: 0.13rem;
}

.cinema_distance,
.cinema_price {
  text-align: right;
}

.cinema_price {
  color: #ff5f16;
  font-size: 0.1rem;

  span {
    font-size: 0.15rem;
  }
}

.cinema_distance {
  font-size: 0.1rem;
  color: var(--cl-wh);
}
</style>
